<template>
  <NotLoggedIn v-if="!isLoggedIn" page-content="发布内容" />
  <div v-else class="parent-container">
    <!-- 顶部菜单 -->
    <div class="reds-sticky-box">
      <div class="reds-sticky">
        <div class="tertiary center reds-tabs-list">
          <div
              class="reds-tab-item"
              :class="getActiveClass('/push/note')"
              @click="toNote"
          >
            <span>发布游记</span>
          </div>

          <div
              class="reds-tab-item"
              :class="getActiveClass('/push/disaster')"
              @click="toDisaster"
          >
            <span>发布灾害</span>
          </div>

          <div
              class="reds-tab-item"
              :class="getActiveClass('/push/secondhand')"
              @click="toSecondHand"
          >
            <span>发布二手</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
      <router-view></router-view>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import NotLoggedIn from "@/components/NotLoggedIn.vue";
import {computed} from "vue";
import UserUtil from "@/utils/User/User";

const router = useRouter()
const route = useRoute()
const isLoggedIn = computed(() => UserUtil.isLogin());
// 路由跳转方法
const toNote = () => router.push('/push/note')
const toDisaster = () => router.push('/push/disaster')
const toSecondHand = () => router.push('/push/secondhand')

// 激活状态判断
const getActiveClass = (path: string) => {
  return route.path.startsWith(path) ? 'active' : ''
}
</script>

<style lang="less" scoped>
.parent-container {
  background: #fff;
  position: relative;

  .reds-sticky-box {
    user-select: none;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .reds-sticky {
    padding: 16px 0;
    z-index: 1005;
    width: 100%;
    background: hsla(0, 0%, 100%, 0.98);
    //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .reds-tabs-list {
      display: flex;
      position: relative;
      font-size: 16px;
      justify-content: center;

      .reds-tab-item {
        padding: 0 16px;
        margin: 0 8px;
        height: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: rgba(51, 51, 51, 0.8);
        transition: all 0.3s ease;

        &:hover {
          color: #333;
        }

        &.active {
          background: rgba(0, 0, 0, 0.03);
          border-radius: 20px;
          font-weight: 600;
        }
      }
    }
  }

  .content-container {
    padding: 82px 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}
</style>